<template>
  <div>
    <el-dialog title="增加商品" :visible.sync="openadd" width="33%">
      <!-- 编辑的区域 -->
      <div class="flex-between">
        <div style="margin-left: 30px">
          <span class="t1">商品id:</span>
          <el-input
            placeholder="请输入商品iid"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.iid"
            style="width: 170px"
          />
        </div>
        <div>
          <span class="t1">商品标题:</span>
          <el-input
            placeholder="请输入商品标题"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.title"
            style="width: 180px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div>
          <span class="t1">商品旧价格:</span>
          <el-input
            placeholder="请输入商品旧价格"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.orgPrice"
            style="width: 170px"
          />
        </div>
        <div>
          <span class="t1">商品价格:</span>
          <el-input
            placeholder="请输入商品价格"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.price"
            style="width: 180px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div style="margin-left: 14px">
          <span class="t1">商品收藏:</span>
          <el-input
            placeholder="请输入商品收藏"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.cfav"
            style="width: 170px"
          />
        </div>
        <div>
          <span class="t1">商品销量:</span>
          <el-input
            placeholder="请输入商品销量"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.sale"
            style="width: 180px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div style="margin-left: 15px">
          <span class="t1">商品类型:</span>
          <el-select
            v-model="adddetail.leixing"
            placeholder="请选择商品类型"
            style="width: 170px"
            @change="bjchange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div>
          <span class="t1">商品图片:</span>
          <el-input
            placeholder="请输入商品图片地址"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.img"
            style="width: 180px"
          />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openadd = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
      <!-- 编辑结束 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "pop",
          label: "流行",
        },
        {
          value: "new",
          label: "新款",
        },
        {
          value: "sell",
          label: "畅销",
        },
      ],
      adddetail: {
        iid: "",
        title: "",
        orgPrice: "",
        price: "",
        cfav: "",
        sale: "",
        leixing: "",
        img: "",
        lxtype: "",
      },
      openadd: false,
    };
  },
  methods: {
    // 编辑选择框改变的
    bjchange(e) {
      if (e == "pop") {
        this.adddetail.leixing = "流行";
        this.adddetail.lxtype = "primary";
      }
      if (e == "sell") {
        this.adddetail.leixing = "畅销";
        this.adddetail.lxtype = "success";
      }
      if (e == "new") {
        this.adddetail.leixing = "新款";
        this.adddetail.lxtype = "danger";
      }
    },
    open() {
      this.openadd = true;
      this.adddetail = {
        iid: "",
        title: "",
        orgPrice: "",
        price: "",
        cfav: "",
        sale: "",
        leixing: "",
        img: "",
        lxtype: "",
      };
    },
    close() {
      this.openadd = false;
    },
    sure() {
      if (this.adddetail.iid == "") {
        this.$message.error("请选择商品iid");
        return;
      }
      console.log("增加的商品详情", this.adddetail);
      this.$emit("adddetail1", this.adddetail);
    },
  },
};
</script>

<style lang="less">
.tbox {
  margin-bottom: 20px;
}
.w {
  width: 190px;
}

.t1 {
  padding-right: 10px;
  color: #545c64;
  font-weight: bold;
}
</style>